<template>
  <div class="login-content">
    <h3>系统登陆</h3>
    <el-form :model="form" status-icon :rules="rules" ref="form" class="demo-ruleForm">
      <el-form-item prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入用户名" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input type="password" v-model.trim="form.pass" placeholder="请输入密码" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="checked" class="login-checked">
        <el-checkbox v-model="form.checked" size="medium " false-label="false" true-label="true">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item class="login-submit-item">
        <el-button type="primary" class="login-submit" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  name: 'login',
  data () {
    // 定义检验规则
    let checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        pass: '',
        checked: true
      },
      rules: {
        name: [
          {validator: checkName, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    this.getCookie()
  },
  methods: {
    // 提交登录页面
    submitForm (formName) {
      let userName = this.form.name
      let userPwd = this.form.pass
      // 存入cookie
      if (this.form.checked) {
        this.setCookie(userName, userPwd, 7)
      }
      // 进行验证表单内容是否填写正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postRequest('/login', {
            name: userName,
            pass: userPwd
          }).then(res => {
            // console.log(res)
            let oData = res.data
            if (oData.success) {
              this.$store.commit('setToken', oData.data.token)
              this.$router.push({path: '/layout'})
            } else {
              this.$message.error(oData.data.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 设置cookie
    setCookie (name, pwd, exdays) {
      let exdate = new Date()
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存天数
      // 凭借cookie字符串
      document.cookie = 'userName' + '=' + name + ';path="/";expires=' + exdate.toGMTString()
      document.cookie = 'userPwd' + '=' + pwd + ';path="/";expires=' + exdate.toGMTString()
    },
    // 获取cookie
    getCookie () {
      // console.log(document.cookie)
      let cookies = document.cookie
      if (cookies.length > 0) {
        let arr = cookies.split('; ')
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split('=')// 再次切割
          if (arr2[0] === 'userName') {
            this.form.name = arr2[1]
          } else if (arr2[0] === 'userPwd') {
            this.form.pass = arr2[1]
          }
        }
      }
    },
    // 清除cookie
    clearCookie () {
      this.setCookie('', '', -1)
    }
  }
}
</script>

<style scoped lang="scss">
  .login-content {
    width: 310px;
    margin: 150px auto;
    color: #505458;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 25px 35px 15px;
    box-shadow: 0 0 25px #cac6c6;
    .demo-ruleForm {
      .login-checked {
        text-align: left;
      }
    }
    .login-submit-item {
      width: 100%;
      .login-submit {
        width: 100%;
      }
    }
  }
</style>
